<template lang="html">
  <div class="container" v-loading="loading">
      <div class="search">
          <el-form :inline="true" class="demo-form-inline">
              <el-form-item>
                <el-input class="form_input" v-model="searchText" placeholder=""></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :disabled="loading" size="small" @click="onSubmit">搜索</el-button>
              </el-form-item>
          </el-form>
      </div>
      <div class="tables">
          <el-table :data="tableData" @selection-change="handleSelectionChange" :row-class-name="rowStyle" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column prop="id" label="编号" align="center"></el-table-column>
            <el-table-column prop="createTime" label="日期" align="center"></el-table-column>
            <el-table-column prop="memberId" label="ID" align="center"></el-table-column>
            <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
            <el-table-column prop="branchStoreName" label="所属店铺" align="center"></el-table-column>
            <el-table-column prop="designerName" label="测量师" align="center"></el-table-column>
            <el-table-column prop="rechargeMoney" label="充值金额(元)" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleAudit(scope.row)">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
        loading: false,
        searchText: '',
        tableData: [],
        currentData: [],
        currentPage: 1,
        totalPage: 0,
        pageSize: 10,
    }
  },
  created(){
    this.getServeData();
  },
  methods:{
    getServeData(){
      this.loading = true;
      this.$http.selectRechargeAuditPage({
        query: this.searchText,
        pageNumber: this.currentPage,
        pageSize: this.pageSize
      }).then(res=>{
        this.loading = false;
        this.tableData = res.data.rows;
        this.totalPage = res.data.total;
        this.pageSize = res.data.pageSize;
        this.tableData.forEach(item=>{
          if(item.createTime){
            item.createTime = this.$parent.formatTime(item.createTime);
          }
        });
      });
    },
    updateRechargeAudit(id,type){
      this.loading = true;
      this.$http.updateRechargeAudit({
        id: id,
        auditType: type
      }).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.onSubmit();
        }
      });
    },
    rowStyle({row,rowIndex}) {
      for(let i=0;i<this.currentData.length;i++){
        if(JSON.stringify(row) == JSON.stringify(this.currentData[i])){
          return 'row_style';
        }
      }
    },
    handleSelectionChange(e){
      this.currentData = [];
      this.currentData = this.currentData.concat(e);
    },

    handleAudit(e){
      this.$confirm('审核是否通过？',{
        cancelButtonText: '否',
        confirmButtonText: '是',
        distinguishCancelAndClose: true,
        closeOnPressEscape: false,
        closeOnClickModal: false
      }).then(()=>{
        this.updateRechargeAudit(e.id,2);
      }).catch(action=>{
        if(action === 'cancel'){
          this.updateRechargeAudit(e.id,3);
        }
      });
    },
    onSubmit(){
      this.handleCurrentChange(1);
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.currentPage = e;
      this.getServeData();
    },
  }

}
</script>

<style lang="css" scoped>
</style>
